<template>
  <el-container id="VisualPositionCountPieCharts">
  </el-container>
</template>


<script>

export default {
  name: "VisualPositionCountPieCharts",
  data() {
    return {
      data: []
    }
  },
  methods: {
    initCharts() {
      let chartDom = document.getElementById('VisualPositionCountPieCharts');
      let myChart = this.$echarts.init(chartDom);
      let options = {
        tooltip: {
          trigger: 'item'
        },
        legend: {
          top: '5%',
          left: 'center',
          type:"scroll",
          orient: 'horizontal', // 图例列表的布局朝向
        },
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: '#fff',
              borderWidth: 2
            },
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 40,
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: this.data
          }
        ]
      }
      options && myChart.setOption(options, true);
      window.addEventListener("resize", function () {
        myChart.resize();
      });
    },
  },
  mounted() {
    this.$api.getPositionCountDistribution().then(rep => {
      this.data = rep.data
      this.initCharts()
    }).finally(

    )

  },
}
</script>

<style scoped>
#VisualPositionCountPieCharts {
  width: 100%;
  height: 85vh;
}
</style>